<template>
  <!-- <suspense> 组件有两个插槽。它们都只接收一个直接子节点 -->
  <Suspense>
    <template #default>
      <!-- 异步组件 -->
      <SuspenseTest />
    </template>
    <template #fallback>
      <!-- 骨架框 -->
      <Skeleton />
    </template>
  </Suspense>
</template>

<script setup lang="ts">
// 异步组件suspense，用途：骨架框
import Skeleton from './Skeleton.vue';
// import SuspenseTest from '@/views/suspense/SuspenseTest.vue';
import { defineAsyncComponent } from 'vue';
// 通过defineAsyncComponent加载异步配合import 函数模式便可以分包
// 简写：传入函数
const SuspenseTest = defineAsyncComponent(() => import('./SuspenseTest.vue')); // 代码分包+性能优化
// 完整写法：传入对象
// const SuspenseTest = defineAsyncComponent({
//   // 加载函数
//   loader: () => import('@/views/suspense/SuspenseTest.vue'),

//   // 加载异步组件时使用的组件
//   loadingComponent: Skeleton,
//   // 展示加载组件前的延迟时间,默认为200ms
//   delay: 200

//   // 加载失败后展示的组件
//   // errorComponent:errorComponent,
//   // 如果提供了一个 timeout 时间限制，并超时了也会显示这里配置的报错组件，默认值是：Infinity
//   // timeout: 3000
// });
</script>

<style lang="scss" scoped></style>
